<template>
  <div class="carousel">
    <el-carousel style="border-radius: 10px" trigger="click" height="150px">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="item.src" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const list = ref([
  {
    src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/160877/9/9721/63501/604200b0Ef679a926/45f25876460cc5e3.jpg!q70.jpg.dpg'
  },
  {
    src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166069/24/9132/182523/60403d2bE2b131c61/434466a0fe2ebd5f.jpg!q70.jpg.dpg'
  },
  {
    src: '//imgcps.jd.com/ling4/65821632858/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c136f5e82acdd181ddfed5e/37e93cf4/cr_1125x445_0_171/s1125x690/q70.jpg'
  },
  {
    src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/123624/24/2195/99979/5ec3a165E12b276e2/2e5b8a2606fbabfe.jpg!q70.jpg.dpg'
  },
  {
    src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159346/32/10375/201711/6042b13dE55385e82/60a9c7150172e7e9.jpg!cr_1125x445_0_171!q70.jpg.dpg'
  },
  {
    src: '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/162652/28/10380/370234/604318e4Ed7843580/007dfbdfe9ac1cfc.jpg!cr_1125x445_0_171!q70.jpg.dpg'
  }
])

</script>

<style lang='less' scoped>
.carousel {
  .el-carousel__item img {
    opacity: 0.75;
    height: 150px;
    margin: 0;
  }

  /deep/ .el-carousel__button {
    height: 5px;
    width: 5px;
    border-radius: 30px;
  }
}
</style>
